/* ===== Base bar (unchanged) ===== */
.custom-navbar {
  background-color: rgba(0, 32, 18, 0.933);
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 1000; transition: top .3s ease;

  /* Keep override in case span.navbar-toggler-icon is ever used */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.custom-footer { background-color: rgba(0, 32, 18, 0.933); position: static; width:100%; height:68px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; margin-top:2rem; }
.navbar-nav .nav-link { color: #fff; font-size: 16px; padding: 8px 4px; position: relative; transition: color .3s; }
.navbar-nav .nav-link:hover { color: #33ff88 !important; text-decoration: underline; }
.navbar-nav .nav-link.active { color: #33ff88 !important; font-weight: 700; position: relative; z-index: 1; }
.navbar-nav .nav-link.active::after { content:""; position:absolute; left:0; right:0; bottom:1px; margin:0 auto; width:60%; height:3px; background:#33ff88; border-radius:2px; }
.navbar-nav { gap: 28px; }

/* Toggler button border + inline SVG lines are white */
.custom-navbar .navbar-toggler { border-color:#ffffff !important; }
.custom-navbar .navbar-toggler .hamburger {
  display: block; width: 24px; height: 24px;
  stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; fill: none;
}
.custom-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.25); }

/* Kept for compatibility if a span.navbar-toggler-icon is present */
.custom-navbar .navbar-toggler-icon {
  background-image: var(--bs-navbar-toggler-icon-bg) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Auth buttons */
.auth-buttons { display:flex; gap:12px; }
.auth-buttons a{
  display:inline-block; padding:8px 24px; border-radius:25px;
  font-size:15px; font-weight:700; text-decoration:none;
  background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
  color:#002012; box-shadow:0 2px 6px rgba(0,0,0,.3); transition: filter .2s, transform .2s;
}
.auth-buttons a:hover{ filter:brightness(.9); transform:translateY(-1px); }

@media (max-width: 768px) {
  .auth-buttons{ flex-direction:column; align-items:center; }
  .auth-buttons a{ width:auto; margin-bottom:8px; text-align:center; }
  .auth-buttons a:last-child{ margin-bottom:0; }
}

/* ===== Profile badge & dropdown ===== */
.user-dropdown-btn{ background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:.35rem .6rem; }
.user-dropdown-btn:hover{ border-color:#34d399; box-shadow:0 0 0 .1rem rgba(52,211,153,.25); }
.user-initials{
  width:30px; height:30px; background:#25a34a; border-radius:50%;
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; text-transform:uppercase; font-size:13px;
}
.user-fullname{ font-weight:600; color:#fff; }

/* Dropdown */
.gsg-dropdown{
  background: linear-gradient(180deg, #0a211a 0%, #0e2c23 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  overflow:hidden;
}
.gsg-dropdown .dropdown-item{ padding:.7rem 1rem; color:#e5e7eb; }
.gsg-dropdown .dropdown-item:hover{ background: rgba(52,211,153,.12); color:#fff; }
.gsg-dropdown .dropdown-divider{ border-top:1px solid rgba(255,255,255,.08); }

/* ===== Notifications UI (unchanged) ===== */
.notif-bell{
  color:#fff; position:relative; margin-right:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.notif-bell:hover{
  transform: translateY(-1px);
  border-color: rgba(52,211,153,.5);
  box-shadow: 0 0 0 .12rem rgba(52,211,153,.18);
}
.notif-icon{ display:flex; }
.notif-icon svg{ width:22px; height:22px; color:#ffffff; display:block; }
.notif-badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:10px; background:#ffffff; color:#002012;
  border:1px solid rgba(0,0,0,.35); font-size:11px; font-weight:800;
  display:none; align-items:center; justify-content:center; line-height:18px;
}
.notif-badge.show{
  display:inline-flex;
  background:#ef4444; color:#fff; border-color:rgba(0,0,0,.35);
  animation: gsg-badge-pulse 2s ease-in-out infinite;
}
@keyframes gsg-badge-pulse{
  0%{ transform: scale(1); box-shadow:0 0 0 0 rgba(239,68,68,.35); }
  50%{ transform: scale(1.06); box-shadow:0 0 0 6px rgba(239,68,68,0); }
  100%{ transform: scale(1); box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

.notif-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:999; }
.notif-overlay.show{ display:block; }
.notif-drawer{
  position:fixed; top:0; right:0; height:100vh; width:380px;
  color:#d8efe6;
  background: radial-gradient(120% 120% at 20% 0%, #0e3127 0%, #07241d 60%, #061b16 100%);
  border-left: 2px solid rgba(52,211,153,.25);
  box-shadow:-6px 0 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  transform:translateX(100%); transition:transform .25s ease; z-index:1001;
  display:flex; flex-direction:column; overflow:hidden;
}
.notif-drawer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(52,211,153,.14) 1px, transparent 1px),
    linear-gradient(0deg, rgba(52,211,153,.12) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
  opacity:.35;
}
.notif-drawer.open{ transform:translateX(0); }
.notif-header{ display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid rgba(52,211,153,.25);
  background: linear-gradient(180deg, rgba(6,27,22,.6), rgba(6,27,22,.25));
}
.notif-circle-count{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:#22c55e; color:#062a20; font-size:12px; font-weight:800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.notif-header .btn-close{ filter: invert(1) grayscale(1); opacity:.7; }
.notif-header .btn-close:hover{ opacity:1; }
.notif-list{ flex:1; overflow-y:auto; padding:8px 0; }
.notif-item{
  position:relative; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer; background: rgba(255,255,255,.02);
  transition: background .15s ease, transform .12s ease, border-color .2s ease;
}
.notif-item.unread{ box-shadow: inset 3px 0 0 #33ff88; background: rgba(50,255,150,.05); }
.notif-item:hover{ background: rgba(52,211,153,.12); transform: translateX(2px); }
.notif-item .title{ font-weight:700; margin-bottom:4px; color:#ffffff; }
.notif-item .message{ font-size:14px; white-space:pre-line; color:#cde7dd; }
.notif-item small{ color:#9fb4ac; }
.notif-empty{ text-align:center; color:#9fb4ac; padding:40px 16px; }
.notif-empty img{ width:72px; opacity:.55; margin-bottom:10px; }
.notif-footer{
  display:flex; align-items:center; gap:12px;
  border-top:1px solid rgba(52,211,153,.25);
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(6,27,22,.15), rgba(6,27,22,.35));
}
#markAllSeenBtn{
  --gsg-green1:#22c55e; --gsg-green2:#10b981;
  border-radius:12px; border:1px solid rgba(52,211,153,.35);
  background:transparent; color:#d1fae5; font-weight:800; letter-spacing:.2px;
  padding:6px 12px; transition: background .2s, color .2s, box-shadow .2s, transform .1s;
}
#markAllSeenBtn:hover{
  background: linear-gradient(90deg, var(--gsg-green1) 0%, var(--gsg-green2) 100%);
  color:#052016; box-shadow: 0 0 0 3px rgba(52,211,153,.20), 0 8px 20px rgba(0,0,0,.25);
  transform: translateY(-1px);
}
.notif-footer a{ text-decoration:none; font-weight:700; color:#a7f3d0; }
.notif-footer a:hover{ color:#ffffff; text-decoration:underline; }

/* ===== Offcanvas (MOBILE ENHANCEMENTS) ===== */
.offcanvas.text-bg-dark {
  background: linear-gradient(135deg,
              rgba(10, 48, 33, 0.88) 0%,
              rgba(8, 39, 29, 0.86) 35%,
              rgba(5, 26, 20, 0.85) 70%,
              rgba(3, 16, 12, 0.85) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 991.98px) {
  .offcanvas.offcanvas-end.gsg-offcanvas { width: clamp(280px, 68vw, 560px); }
}
.offcanvas-backdrop.show {
  background-color: rgba(0, 32, 18, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.offcanvas-header .offcanvas-title{ font-size:1.1rem; color:#fff; line-height:1; }

/* Mobile list look */
.mobile-menu-list .list-group-item{
  border-color: rgba(255,255,255,.10);
  padding-left: .85rem; padding-right: .85rem;
}
.menu-link{
  display:flex; align-items:center; width:100%;
  padding:.8rem .25rem; color:#ffffff; text-decoration:none; font-size:1.05rem;
}
.menu-link:hover{ color:#e6fff2; }
.menu-icon .mi{
  width:22px; height:22px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ===== THEME MODAL ===== */
.gsg-modal .modal-dialog{ max-width: 360px; }
.gsg-modal .modal-content{
  background: radial-gradient(120% 120% at 20% 0%, #0e3127 0%, #07241d 60%, #061b16 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  color: #e7f7ef;
}
.gsg-modal .modal-header{ border:0; }
.gsg-modal .modal-body{ color:#d8efe6; }
.gsg-modal .btn-close{ filter: invert(1) grayscale(1); }
.btn-gsg{
  background: linear-gradient(90deg, #22c55e 0%, #10b981 100%);
  color:#062a20; font-weight:700; border:none;
}
.btn-gsg:hover{ filter: brightness(.95); }